<template>
	<!-- 20230201 -->
	<view class="mall-cart-page position-relative">

		<!-- 页面内容 -->
		<view class="page-content padding-bottom-tab-bar-footer-20">
			<view class="jc-header bg-f5" v-if="effectiveProductList.length || invalidProductList.length">

				<!-- #ifdef APP-PLUS -->
				<!-- 占位 view，避免页面内容出现在状态栏 -->
				<view class="height-status-bar"></view>
				<!-- #endif -->

				<view class="line-height-80">
					<view class="padding-lr-30 flex align-center justify-between">
						<view class="text-30 text-33">购物车好物</view>
						<view class="text-30 text-main" @click="edit = !edit" v-if="effectiveProductList.length">
							{{edit ? '完成' : '编辑'}}
						</view>
					</view>
				</view>
			</view>

			<view class="margin-top-status-bar-80-20">
				<!-- 购物车有数据，有效产品或无效产品 -->
				<view v-if="effectiveProductList.length || invalidProductList.length">
					<!-- 购物车产品列表 -->
					<jc-mall-cartProduct :cart-effective="effectiveProductList" :cart-invalid="invalidProductList"
						@choose="choose" @clear="clear" @change="change">
						<!-- 凑单文案 -->
						<view class="padding-top-20 padding-right-20 flex align-center justify-between"
							style="padding-left: 70rpx;">
							<!-- 凑单价钱 -->
							<view class="text-26">满{{freeFreightLimit}}元免运费,还差{{differMoney}}元</view>
							<!-- 按钮 -->
							<view class="flex align-center" v-if="differMoney > 0" @tap="go('/pages/mall/pool')">
								<view class="text-26 text-main">去凑单</view>
								<text class="tyIcon-arrow-right text-20 text-main"></text>
							</view>
							<view class="flex" v-else>
								<view class="text-26 text-main">已包邮</view>
							</view>
						</view>
						
					</jc-mall-cartProduct>
				</view>

				<!-- 空购物车 -->
				<view class="" v-else>
					<ty-text-no-data text="购物车是空的" @btnClick="go('/pages/mall/index', 3)"></ty-text-no-data>
				</view>

				<!-- 推荐商品列表 -->
				<view class="">
					<view class="margin-top-20 line-height-40 flex align-center justify-center">
						<view class="border-line"></view>
						<text class="margin-lr-30 text-28 text-4d">好物推荐</text>
						<view class="border-line"></view>
					</view>
					<jc-mall-productList :list="list" :load-status="loadStatus" :is-label-show="true" :type="2">
					</jc-mall-productList>
				</view>
			</view>

			<!-- 底部条 -->
			<view v-if="effectiveProductList.length">
				<view class="jc-footer-tab-bar padding-lr-30 bg-ff">
					<!-- 底部条 -->
					<view
						class="line-height-footer flex align-center justify-between">
						<view class="flex align-center">
							<!-- 全选图标 -->
							<text class="text-40"
								:class="isAllChoose ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc'"
								@click="chooseAll"></text>
							<view class="margin-left-5 line-40 text-28">全选</view>
							
							<!-- 结算价钱 -->
							<view class="margin-left-15">
								<view class="text-30">¥{{choosePrice}}</view>
							</view>		
						</view>
						
						<view class="width-220 line-height-75 bg-main text-center text-ff" style="border-radius: 38rpx;" @click="confirm">
							{{edit ? '删除' : '结算(' + chooseNumber + ')'}}
						</view>

					</view>

				</view>
			</view>

			<!-- 返回顶部 -->
			<view class="btn-block">
				<ty-text-top-home :scroll-top="scrollTop" :is-show-home="false"></ty-text-top-home>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// 编辑模式
				edit: false,
				// 滚动条距离顶部的距离
				scrollTop: 0,

				// 购物车有效产品列表
				effectiveProductList: [],
				// 购物车无效产品列表
				invalidProductList: [],
				// 是否全选
				isAllChoose: false,
				// 选中商品价钱
				choosePrice: 0,
				// 选中商品数量
				chooseNumber: 0,
				// 还剩X元免运费
				differMoney: 0,
				// 满X元免运费
				freeFreightLimit: 0,

				// 加载状态
				loadStatus: '',
				// 推荐商品列表
				list: []
			}
		},

		onReady() {
			// 加载推荐商品
			this.loadList(1)

			// 获取配置
			mall.config.getFreeFreight().then(res => {
				if (res.code == 0) {
					this.freeFreightLimit = res.data.free_freight_limit

					// 重新加载底部栏
					this.loadBottom()
				}
			})
		},

		onShow() {
			// 如果登录，加载购物车商品
			if (this.cn.isLogin()) {
				this.listCartProduct()
			}
		},

		onPageScroll(e) {
			// 滚动距离
			this.scrollTop = e.scrollTop
		},

		onReachBottom() {
			this.loadList(0)
		},

		methods: {
			/**
			 * 加载购物车产品列表
			 * @date 2023-02-01
			 */
			listCartProduct() {
				mall.cart.listCartProduct().then(res => {
					if (res.code == 0) {
						// 购物车有效产品列表
						this.effectiveProductList = res.data.effective_product_list
						// 购物车无效产品列表
						this.invalidProductList = res.data.invalid_product_list
						// 重新加载底部栏
						this.loadBottom()
					}
				})
			},

			/**
			 * 修改数量
			 * @date 2023-02-01
			 */
			change(e) {
				let index = e.identifier
				let number = e.number
				if (e.type == 3) {
					if (e.number <= 1) {
						this.cn.toast('数量不能再少了哦~')
						number = 1
					} else {
						number = e.number
					}
					this.effectiveProductList[index].number = e.number
				} else if (e.type == 2) {
					if (e.number <= 1) {
						this.cn.toast('数量不能再少了哦~')
						return false
					}
					number = e.number
				} else if (e.type == 1) {
					number = e.number
				}

				mall.cart.updateCartProductNumber(this.effectiveProductList[index].id, e.type, number).then(res => {
					if (res.code == 0) {
						this.effectiveProductList = res.data.effective_product_list

						//重新加载底部栏
						this.loadBottom()
					} else {
						//加载购物车商品
						this.listCartProduct()
					}
				})
			},

			/**
			 * 购物车产品选中/取消选中
			 * @param {Object} e
			 * @date 2023-02-01
			 */
			choose(e) {
				let isSelect = this.effectiveProductList[e.index].is_select == 1 ? 0 : 1
				mall.cart.updateCartProductSelectedStatus(this.effectiveProductList[e.index].id, isSelect).then(res => {
					if (res.code == 0) {
						this.effectiveProductList = res.data.effective_product_list

						// 重新加载底部栏
						this.loadBottom()
					}
				})
			},

			/**
			 * 购物车产品全选选中/全选取消选中
			 * @date 2023-02-01
			 */
			chooseAll() {
				let isSelect = this.isAllChoose ? 0 : 1
				mall.cart.updateAllCartProductSelectedStatus(isSelect).then(res => {
					if (res.code == 0) {
						this.effectiveProductList = res.data.effective_product_list

						// 重新加载底部栏
						this.loadBottom()
					}
				})
			},

			/**
			 * 清空失效宝贝
			 * @date 2023-02-01
			 */
			clear() {
				this.cn.confirm('确定清空失效宝贝吗').then(res => {
					if (res.confirm) {
						mall.cart.deleteCartInvalidProduct().then(res => {
							if (res.code == 0) {
								this.cn.toast(res.msg)
								// 购物车无效产品列表
								this.invalidProductList = []
							}
						})
					}
				})
			},

			/**
			 * 重新加载底部栏
			 * @date 2023-02-01
			 */
			loadBottom() {
				let chooseNumber = 0,
					choosePrice = 0,
					isAllChoose = true

				this.effectiveProductList.forEach(value => {
					if (value.is_select == 1) {
						chooseNumber += value.number
						choosePrice += value.product_price * value.number
					} else {
						isAllChoose = false
					}
				})

				this.chooseNumber = chooseNumber
				this.choosePrice = parseFloat(choosePrice).toFixed(2)
				this.isAllChoose = isAllChoose

				this.differMoney = parseFloat(this.freeFreightLimit - this.choosePrice).toFixed(2)
				if (this.differMoney < 0) {
					this.differMoney = parseFloat(0).toFixed(2)
				}
			},

			/**
			 * 点击确认按钮
			 * @param {Object} e
			 * @date 2023-02-01
			 */
			confirm(e) {
				if (!this.chooseNumber) {
					this.cn.toast('请选择商品');
					return false
				}
				// 删除
				if (this.edit) {
					this.cn.confirm('您确定要删除吗').then(res => {
						if (res.confirm) {
							mall.cart.deleteCartSelectedProduct().then(res => {
								if (res.code == 0) {
									// 购物车有效产品列表
									this.effectiveProductList = res.data.effective_product_list

									//重新加载底部栏
									this.loadBottom()
								}
							})
						}
					})
					//结算
				} else {
					uni.navigateTo({
						url: '/pages/mall/order?buy_type=1'
					})
				}
			},

			/**
			 * 获取推荐商品
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-27
			 */
			loadList(isFirstPage) {
				mall.listProduct(this, isFirstPage, '', '', '', 1, '', '', 5)
			}
		}
	}
</script>

<style scoped>
	/* 购物车间距 */
	.margin-top-status-bar-80-20 {
		/* #ifdef MP */
		margin-top: calc(var(--headerHeight) + 20rpx);
		/* #endif */

		/* #ifndef MP */
		margin-top: calc(var(--status-bar-height) + 80rpx + 20rpx);
		/* #endif */
	}

	/* 商品详情 好物推荐 */
	.border-line {
		width: 80rpx;
		height: 1rpx;
		background: #ccc;
	}

	/* 返回顶部和返回首页 */
	.btn-block {
		position: fixed;
		z-index: 900;
		right: 30rpx;
		bottom: calc(var(--window-bottom) + var(--footerHeight) + 50rpx);
	}
</style>